<template>
    <div>
        <setHeader :title="headTitle" settext="提交" @done="gotobtn()"></setHeader>
        <div class="content">
            <div class="main_menu">
                <label for="">圈子名称</label>
                <router-link to="">{{circleInfo.c_name}}</router-link>
            </div>
            <!-- <div class="main_menu">
                <label for="">圈子简介</label>
                <router-link to="">{{circleInfo.c_brief}}</router-link>
            </div> -->
            <div class="main_menu">
                <label for="">圈子主体</label>
                <router-link to="">{{circleInfo.ch_name}}</router-link>
            </div>
            <div class="main_menu circle_erweima" @click="JumpCircleDimension">
                <label for="">圈子二维码</label>
                <router-link to=""><i class="iconfont icon-erweima"></i><i class="iconfont icon-xiangyou"></i></router-link>
            </div>
            <div class="circle_announcement">
                <label for="">圈子简介</label>
                <p class="clear">
                    <textarea name="" id="" cols="30" rows="10"  v-model="circleInfo.c_brief"></textarea>
                    <!-- <i class="iconfont icon-xiangyou" id="js_icon_xiangyou"></i> -->
                </p>
            </div>
            <div class="circle_announcement">
                <label for="">圈子公告</label>
                <p class="clear">
                    <textarea name="" id="" cols="30" rows="10"  v-model="circleInfo.notice"></textarea>
                    <!-- <i class="iconfont icon-xiangyou" id="js_icon_xiangyou"></i> -->
                </p>
            </div>

            <ViewModal :modalState.sync="viewState">
                <circleDimension @done="closePageModal"></circleDimension>
            </ViewModal>
            <!-- 企业简介 -->
        

        </div>
        <so-footer></so-footer>
    </div>
</template>

<script>
import setHeader from '../public/setHeader.vue';
import ViewModal from "@/components/View";
import circleDimension from "@/public/circleDimension";
import soFooter from '../components/footer-bar';
    export default {
        data() {
            return {
                headTitle: '圈子编辑',
                viewState: false,
                userInfo:'',
                cid:'',
                circleInfo:'',
            }
        },
        components: {
            setHeader,
            ViewModal,
            circleDimension,
            soFooter
        },
        mounted() {
            this.userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
            this.cid = this.$route.query.cid;
            //获取圈子信息
            this.getCircleInfo();
        },
        methods: {
            //获取圈子信息
            getCircleInfo:function(){
                let that = this;
                this.$fetch(this.$path+'/api.php/Circle/getCircleInfo',{cid:that.cid})
                .then((res) => {
                    console.log('圈子信息',res);
                    if(res.code == 200){
                        that.circleInfo = res.data;
                    // that.cirImg = res.data.img;
                    // that.info = res.data;
                    // that.headerTitle = res.data.c_name;
                    // that.c_uid = res.data.c_uid;
                    // that.pcount = res.data.pcount;
                    // that.ncount = res.data.ncount;
                    // that.notice = res.data.notice;
                    // that.c_brief = res.data.c_brief;
                    }    
                });
            },
            JumpCircleDimension() {
                // this.$router.push({path:'/circleDimension'});
                this.viewState = true;
            },
            closePageModal() {
                this.viewState = false;
            },
            gotobtn() {
                let that= this;
                let cirles = {};
                cirles.cid = that.circleInfo.cid;
                cirles.c_brief = that.circleInfo.c_brief;
                cirles.notice = that.circleInfo.notice;
                
                this.$post(this.$path + '/index.php/api/circle/editorcircleBase',cirles).then((response) => {
                       if(response.code == 200){
                            that.$openDialog({
                                src: require('../common/images/UI-11.png'),
                                title: '提交完成',
                                message: '编辑成功',
                                okText: '完成',
                                callback (flag) {
                                    if(flag) {
                                        that.$router.replace({ path: '/userCenter/CircleData', query: {paicheNo:cirles.cid}})
                                    }     
                                }
                            }); 
                       }else {
                           that.$openDialog({
                                src: require('../common/images/UI-08.png'),
                                title: '提交失败',
                                message: response.msg,
                                okText: '确定'
                            });
                       }
                })
                  
            },
        }
    }
</script>

<style>
/* 圈子二维码 */
.circle_erweima .icon-erweima {
    font-size: 0.6rem;
}
.circle_erweima .icon-xiangyou {
    vertical-align: super;
}
/* 圈子公告 */
.circle_announcement {
    /* border-bottom: 1px solid #d8d8d8;
    padding-bottom: 0.66rem; */
    position: relative;
}
.circle_announcement label {
    font-size: 0.28rem;
    color: #333;
    text-align: left;
    display: block;
    width: 100%;
    line-height: 1rem;
    padding-left: 0.2rem;
}
.circle_announcement p textarea{
    font-size: 0.26rem;
    color: #666;
    font-weight: 400;
    padding-left: 0.2rem;
    display: inline-block;
    width: 7.5rem;
    text-align: left;
    float: left;
    outline: none;
    border: 1px solid #f1e9e9;
}
.circle_announcement #js_icon_xiangyou {
    position: absolute;
    right: 0.2rem;
    top: 48%;
    margin-top: auto;
}
</style>